
<script setup>
import { ref, computed } from 'vue'

// 静态示例数据
const tableData = ref([
  {
    bidDate: '2025-06-15',
    tenderProjectNo: 'TP20250615001',
    productBatchNo: 'PB20250615',
    productionDate: '2025-06-01',
    expirationDate: '2026-06-01',
    bidAmount: 125000.00,
    depositPaymentDate: '2025-06-16'
  },
  {
    bidDate: '2025-06-10',
    tenderProjectNo: 'TP20250610002',
    productBatchNo: 'PB20250610',
    productionDate: '2025-05-28',
    expirationDate: '2026-05-28',
    bidAmount: 85000.00,
    depositPaymentDate: '2025-06-12'
  },
  {
    bidDate: '2025-06-05',
    tenderProjectNo: 'TP20250605003',
    productBatchNo: 'PB20250605',
    productionDate: '2025-05-20',
    expirationDate: '2026-05-20',
    bidAmount: 150000.00,
    depositPaymentDate: '2025-06-08'
  },
  {
    bidDate: '2025-05-30',
    tenderProjectNo: 'TP20250530004',
    productBatchNo: 'PB20250530',
    productionDate: '2025-05-15',
    expirationDate: '2026-05-15',
    bidAmount: 92000.00,
    depositPaymentDate: '2025-06-03'
  },
  {
    bidDate: '2025-05-25',
    tenderProjectNo: 'TP20250525005',
    productBatchNo: 'PB20250525',
    productionDate: '2025-05-10',
    expirationDate: '2026-05-10',
    bidAmount: 180000.00,
    depositPaymentDate: '2025-05-28'
  }
]);

// 分页状态
const currentPage = ref(1); // 当前页
const pageSize = ref(5);    // 每页显示的数据量，设为5便于查看分页效果

// 计算当前页展示的数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});

// 分页切换处理
const handlePageChange = (page) => {
  currentPage.value = page;
};
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>中标项目</span>
            </div>
        </template>
        <!-- 文章列表 -->
        <el-table :data="currentPageData" style="width: 100%">
            <el-table-column label="投标时间" prop="bidDate"></el-table-column>
            <el-table-column label="项目编号" prop="tenderProjectNo"></el-table-column>
            <el-table-column label="产品批号" prop="productBatchNo"></el-table-column>
            <el-table-column label="生产日期"  prop="productionDate"></el-table-column>
            <el-table-column label="有效期" prop="expirationDate"></el-table-column>
            <el-table-column label="投标总金额" prop="bidAmount"></el-table-column>
            <el-table-column label="缴款日期" prop="depositPaymentDate"></el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
                background
                layout="prev, pager, next"
                :total="tableData.length"
                :current-page="currentPage"
                :page-size="pageSize"
                @current-change="handlePageChange" />
    </el-card>
</template>
<style lang="scss" scoped>

/* 可根据需要调整样式 */
.el-drawer {
  padding: 20px;
}

.el-form {
  margin-top: 10px;
}
/* 自定义大小调整 */
.el-form-item {
  margin-bottom: 20px;
}

.el-input,
.el-button,
.el-date-picker {
  font-size: 16px; /* 修改字体大小 */
  height: 45px;    /* 修改输入框高度 */
}

.el-button {
  height: 45px;    /* 修改按钮高度 */
  font-size: 16px; /* 修改按钮字体大小 */
  line-height: 45px; /* 设置按钮文字居中 */
}
.page-container {
    min-height: 70vh;
    max-height: 80vh;
    width: 90%;
    box-sizing: border-box;
    padding: 20px; /* 给容器一些内边距 */
    overflow: auto; /* 当内容超出时允许滚动 */
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px; /* 你可以根据需要调整字体大小 */
}

.el-form-item {
    margin-bottom: 16px; /* 适当增加表单项之间的间距 */
}

.el-table {
    width: 100%;
    margin-top: 20px; /* 表格与其他内容之间的间距 */
}

.el-pagination {
    margin-top: 20px;
    justify-content: flex-end;
    padding-top: 20px;
    padding-bottom: 20px;
}

.el-button {
    font-size: 14px;
    margin-right: 8px;
}

.el-table-column {
    padding: 10px;
}
</style>
